<template>
	<view class="u-page">
		<u-row>
		<u-col span="10" offset="1" >
		<view class="title" @click="showImgDialog()">
			<image src="../../static/index-title-photo.png" mode="aspectFit" ></image>
			<fui-dialog :show="showImageDialog" title="提示" :content="content" :maskClosable="true" @click="upImage"
				@close="cancel()"></fui-dialog>
			<text>病虫识别</text>
		</view>
		</u-col>
		</u-row>
		<u-row customStyle="margin-bottom: 10px">
			<u-col span="12"  class="centent-aajs">
				<uswiper v-if="showUswiper"></uswiper>
			</u-col>
		</u-row>
	<!-- 	<u-row customStyle="margin-bottom: 10px">
			<u-col span="12"  class="centent-aajs">
				<riskWaring></riskWaring>
			</u-col>
		</u-row> -->
		<u-row customStyle="margin-bottom: 10px">
			<u-col span="10" offset="1">
				<view class="model" span="12">
					<table class="table">
						<tr v-for="(item,index) in modelList" :key="index">
							<td>
								<u-button class="custom-style" v-text="item.title" @click="navToButton(item.title)">
								</u-button>
							</td>
						</tr>
					</table>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	import {
		chooseImage,
		urlTobase64,
		previewImage
	} from "@/common/utils/chooseImage.js" //上传图片以及后续读取封装
	import uswiper from "@/components/modal/uswiper.vue"
	import riskWaring from "@/components/modal/riskWaring.vue"
	export default {
		data() {
			return {
				title: 'Hello',
				modelList: [{
					title: "风险预警"
				}, {
					title: "信息上报"
				},{
					title: "历史信息"
				},{
					title: "信息管理"
				}
				],
				show: true,
				value2: 0,
				content: '图片类型支持PNG、JPG、JPEG、BMP，大小不超过4M',
				showImageDialog: false,
				showUswiper:true
			}
		},
		onLoad() {
			
		},
		onShow() {
			//用于刷新组件,更新数据
			this.showUswiper=true
		},
		onHide(){
			//用于刷新组件,更新数据
			this.showUswiper=false
		},
		components:{uswiper,riskWaring},
		methods: {
			cancel() {
				this.$utils.msg("取消上传")
				this.showImageDialog = false
			},
			showImgDialog() {
				this.showImageDialog = true
			},
			upImage(e) {
				//确认按钮
				if (e.index) {
					chooseImage().then(res => {
						// console.log(res)
						this.$storage.set("imageUrl", res.tempFilePaths)
						this.$utils.navigateTo("ModelPage/upImage", "")
					})
					this.showImageDialog = false
				} else {
					// 取消按钮
					this.$utils.msg("取消上传")
					this.showImageDialog = false
				}
			},
			navitionToVIP() {
				this.$utils.navigateTo('VIP/VIP','')
			},
			navToButton(title) {

				switch (title) {
					case "风险预警":
						this.$utils.navigateTo('riskWaring/riskWaring', '')
						break;
					case "信息上报":
						this.$utils.navigateTo('upInsect/upInsect', '')
						break;
					case "历史信息":
						this.$utils.navigateTo('messageUp/messageUp', '')
						break;
					case "信息管理":
						this.$utils.navigateTo('messageManage/messageManage', '')
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.fui-list__item {
		position: relative;
	}

	.fui-cover {
		width: 100%;
		height: 385rpx;
		display: block;
	}

	.fui-list__title {
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		font-weight: 500;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
	}

	@import "index.scss";
</style>
